<!DOCTYPE html>
<html lang="en">

<head>
  <title>Официальный сайт города Седона</title>
  <link rel="icon" href="favicon.ico">
  <link rel="icon" type="image/png" href="images/favicon.png">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles/styles.css">
</head>

<body>
  <div class="container">
    <header class="page-header">
      <nav class="navigation">
        <a class="navigation-logo" href="index.html">
          <img class="navigation-logo-img" src="images/logotip.svg" width="139" height="70" alt="Логотип Седоны.">
        </a>
        <ul class="navigation-list">
          <li class="navigation-item">
            <a class="navigation-link navigation-link-current" href="index.html">Главная</a>
          </li>
          <li class="navigation-item">
            <a class="navigation-link" href="about.html">О Седоне</a>
          </li>
          <li class="navigation-item">
            <a class="navigation-link" href="catalog.html">Гостиницы</a>
          </li>
        </ul>
        <ul class="navigation-list navigation-user">
          <li class="navigation-item navigation-search">
            <a class="navigation-link navigation-link-icon navigation-link-search" href="#">
              <span class="visually-hidden">
                Поиск.
              </span>
            </a>
          </li>
          <li class="navigation-item">
            <a class="navigation-link navigation-link-icon navigation-link-favorite " href="#">
              <span class="visually-hidden">Избранное.</span>
              <span class="like">12</span>
            </a>
          </li>
          <li class="navigation-item">
            <a class="navigation-link navigation-link-want-here" href="#">
              <span class="button want-here">
                Хочу сюда!
              </span>
            </a>
          </li>
        </ul>
      </nav>
    </header>
    <main class="main-index">
      <div class="cover">
        <h1 class="visually-hidden">Велкам "Седона."</h1>
        <img class="main-index-sity" src="images/welcome.svg" alt="Welcome to the gardeous Sedona." width="458"
          height="352">
      </div>
      <section class="caption">
        <h2 class="caption-headline">Седона — небольшой городок в Аризоне, <br>заслуживающий большего!</h2>
        <p class="caption-subtitle">Рассмотрим 5 причин, по которым Седона круче, чем Гранд-Каньон!</p>
      </section>
      <section class="advantages">
        <h2 class="visually-hidden">Преимущества.</h2>
        <ul class="advantages-list">
          <li class="advantages-item advantages-item-wide">
            <div class="advantages-caption advantages-caption-wide">
              <h3 class="advantages-title-attraction">Настоящий <br>городок</h3>
              <p class="advantages-description advantages-description-white">-№1-</p>
              <p class="advantages-description advantages-description-white">Седона — не аттракцион для <br>туристов,
                там течёт своя <br>жизнь</p>
            </div>
            <img class="advantages-description" src="images/sity.jpg" width="800" height="384" alt="Город.">
            <ul class="advantages-list advantages-features">
              <li class="advantages-item item-home">
                <h4 class="advantages-title">Жильё</h4>
                <p class="advantages-description">Рекомендуем пожить <br>в настоящем мотеле, <br>всё как в кино!</p>
              </li>
              <li class="advantages-item item-food">
                <h4 class="advantages-title">Еда</h4>
                <p class="advantages-description">Всегда заказывайте <br>топовый фирменный бургер, <br>вы не
                  разочаруетесь!</p>
              </li>
              <li class="advantages-item item-souvenir">
                <h4 class="advantages-title">Сувениры</h4>
                <p class="advantages-description">Не только китайского, <br>но и настоящего местного <br>производства!
                </p>
              </li>
            </ul>
          </li>
          <li class="advantages-benefits advantages-item-wide advantages-item-odd">
            <div class="advantages-caption advantages-caption-wide">
              <h3 class="advantages-title-attraction">Там есть<br> мост дьявола</h3>
              <p class="advantages-description advantages-description-white">-№2-</p>
              <p class="advantages-description advantages-description-white">Да, по нему можно пройти! <br>Если вы
                осмелитесь, <br>разумеется</p>
            </div>
            <img class="advantages-description" src="images/devils-bridge.jpg" width="800" height="384"
              alt="Мост дьявола.">
          </li>
          <li class="advantages-item">
            <h3 class="advantages-title">Небольшая <br>площадь</h3>
            <p class="advantages-description advantages-description-num">&#8212;№3&#8212;</p>
            <p class="advantages-description">Все достопримечательности <br>находятся очень близко</p>
          </li>
          <li class="advantages-item advantages-item-dark">
            <h3 class="advantages-title">Красивая <br>дорога</h3>
            <p class="advantages-description advantages-description-num">&#8212;№4&#8212;</p>
            <p class="advantages-description">Ехать в Седону из Лас-Вегаса <br>совсем не скучно!</p>
          </li>
          <li class="advantages-item">
            <h3 class="advantages-title">Мало<br>туристов</h3>
            <p class="advantages-description advantages-description-num">&#8212;№5&#8212;</p>
            <p class="advantages-description">Большинство едет в Гранд <br>Каньон и толпится там</p>
          </li>
        </ul>
      </section>
      <section class="services">
        <h2 class="services-title">Заинтересовались?</h2>
        <p class="services-title-text">Укажите предполагаемые даты поездки,<br>и мы покажем вам лучшие предложения
          гостиниц в Седоне&emsp;</p>
        <a class="button-search" href="#">Поиск гостиницы в Седоне</a>
      </section>
      <section class="newsletter">
        <h2 class="newsletter-title">Подпишитесь на рассылку</h2>
        <form class="newsletter-form" action="https://echo.htmlacademy.ru/" method="post">
          <p class="newsletter-subtitle">Только полезная информация и никакого спама, <br>честное бойскаутское!</p>
          <div class="newsletter-field">
            <input class="email" placeholder="Ваш e-mail" type="email" name="newsletter-email" id="newsletter-email"
              required>
            <span class="visually-hidden">Ваш e-mail.</span>
            <button class="newsletter-button">Подписаться</button>
          </div>
        </form>
      </section>
    </main>
    <footer class="footer-social">
      <ul class="footer-social-list">
        <li class="footer-social-vkontakte">
          <a class="button-social button-social-vkontakte" href="https://vk.com/htmlacademy">
            <svg class="footer-icon" aria-hidden="true" focusable="false" width="24" height="15" viewBox="0 0 24 15"
              fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M23.45 1.448c.166-.546 0-.948-.795-.948H20.03c-.668 0-.976.347-1.143.73 0 0-1.335 3.196-3.226 5.272-.612.602-.89.793-1.224.793-.167 0-.418-.191-.418-.738V1.448c0-.656-.184-.948-.74-.948H9.151c-.417 0-.668.304-.668.593 0 .621.946.765 1.043 2.513v3.798c0 .833-.153.984-.487.984-.89 0-3.055-3.211-4.34-6.885C4.45.788 4.198.5 3.527.5H.9c-.75 0-.9.347-.9.73 0 .682.89 4.07 4.145 8.551 2.17 3.06 5.225 4.719 8.008 4.719 1.669 0 1.875-.368 1.875-1.003v-2.313c0-.737.158-.884.687-.884.39 0 1.057.192 2.615 1.667 1.78 1.749 2.073 2.533 3.075 2.533h2.625c.75 0 1.126-.368.91-1.096-.238-.724-1.088-1.775-2.215-3.022-.612-.71-1.53-1.475-1.809-1.858-.389-.491-.278-.71 0-1.147 0 0 3.2-4.426 3.533-5.929h.001Z"
                fill="" />
            </svg>
            <span class="visually-hidden">В Контакте.</span>
          </a>
        </li>
        <li class="footer-social-telegramm">
          <a class="button-social button-social-telegramm" href="https://t.me/htmlacademy">
            <svg class="footer-icon" aria-hidden="true" focusable="false" width="18" height="16" viewBox="0 0 18 16"
              fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M16.785.6.841 6.747c-1.088.437-1.082 1.044-.2 1.315L4.735 9.34l9.471-5.976c.448-.273.857-.126.521.172l-7.674 6.926h-.001.001l-.282 4.22c.414 0 .596-.19.828-.413l1.989-1.934 4.135 3.055c.763.42 1.31.204 1.5-.706L17.938 1.89C18.216.775 17.513.27 16.786.599Z"
                fill="" />
            </svg>
            <span class="visually-hidden">Телеграмм.</span>
          </a>
        </li>
        <li class="footer-social-youtube">
          <a class="button-social button-social-youtube" href="https://www.youtube.com/user/htmlacademyru">
            <svg class="footer-icon" aria-hidden="true" focusable="false" width="22" height="17" viewBox="0 0 22 17"
              fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M18.607 0H3.174C1.314 0 0 1.594 0 3.4v10.094C0 15.406 1.313 17 3.174 17h15.652C20.468 17 22 15.406 22 13.6V3.4C21.781 1.594 20.468 0 18.607 0ZM7.662 12.537V4.463L14.995 8.5l-7.333 4.037Z"
                fill="" />
            </svg>
            <span class="visually-hidden">Ютуб.</span>
          </a>
        </li>
      </ul>
      <address class="footer-phone">
        <a class="phone" href="tel:+7(812)812-12-12">+7 (812) 812-12-12
          <span class="visually-hidden">Номер мобильного телефона.</span>
        </a>
      </address>
      <address class="footer-item">
        <a class="footer-logo" href=" https://htmlacademy.ru/">
          <svg class="logo-html" aria-hidden="true" focusable="false" width="115" height="34" viewBox="0 0 115 34"
            fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M0 13.9v2.6h2.5v-2.6H0ZM11.6 5.5c-1.6 0-2.8.7-3.6 1.7h-.1V1h-2v15.5h2v-5.3c0-2.1 1.3-3.6 3.3-3.6 1.8 0 2.9 1.4 2.9 3.2v5.7h2v-6.1c.1-3-1.8-4.9-4.5-4.9ZM26.6 5.8h-4.8V2.1h-2v3.8h-1.9v2h1.9v6c0 1.7 1 2.7 2.7 2.7h4.1v-2h-3.7c-.7 0-1.1-.4-1.1-1.1V7.8h4.8v-2ZM41.1 5.6c-1.6 0-2.9.8-3.5 2.1h-.1c-.6-1.2-1.8-2.1-3.4-2.1-1.4 0-2.5.8-3.1 1.8h-.1V5.8H29v10.6h2V11c0-2 1-3.5 2.6-3.5 1.5 0 2.4 1 2.4 2.6v6.3h2v-5.6c0-2.4 1.4-3.3 2.6-3.3 1.5 0 2.4 1 2.4 2.6v6.3h2V9.9c.1-2.5-1.4-4.3-3.9-4.3ZM47.8 13.7c0 1.7 1 2.7 2.8 2.7h2v-2h-1.7c-.7 0-1.1-.4-1.1-1.1V1h-2v12.7ZM28.9 20.7c-.9-1.1-2.2-1.8-3.9-1.8-3.1 0-5.4 2.3-5.4 5.6s2.3 5.6 5.4 5.6c1.8 0 3-.8 3.8-1.9h.1v1.6h2V19.2h-2v1.5Zm-3.6 7.4c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6 3.6 1.6 3.6 3.6c0 1.9-1.4 3.6-3.6 3.6ZM44.2 23c-.5-2.4-2.6-4.1-5.4-4.1a5.4 5.4 0 0 0-5.6 5.6c0 3.1 2.2 5.6 5.6 5.6 2.8 0 4.9-1.8 5.4-4.2h-2.1a3.4 3.4 0 0 1-3.3 2.3c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6c1.6 0 2.8 1 3.3 2.2h2.1V23ZM55.1 20.7c-.9-1.1-2.2-1.8-3.9-1.8-3.1 0-5.4 2.3-5.4 5.6s2.3 5.6 5.4 5.6c1.8 0 3-.8 3.8-1.9h.1v1.6h2V19.2h-2v1.5Zm-3.6 7.4c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6 3.6 1.6 3.6 3.6c0 1.9-1.5 3.6-3.6 3.6ZM68.7 20.8c-.9-1.1-2.2-1.9-3.9-1.9-3.1 0-5.4 2.3-5.4 5.6s2.2 5.6 5.4 5.6c1.7 0 3-.8 3.8-1.8h.1v1.5h2V14.4h-2v6.4Zm-3.6 7.3c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6 3.6 1.6 3.6 3.6c-.1 2-1.5 3.6-3.6 3.6ZM78.3 18.9c-3.3 0-5.5 2.5-5.5 5.6 0 3 2.1 5.6 5.5 5.6 2.5 0 4.5-1.3 5.2-3.6h-2.1c-.5 1-1.6 1.6-3 1.6-1.9 0-3.3-1.3-3.4-2.9h8.8c.2-3.6-2-6.3-5.5-6.3Zm0 1.9c1.7 0 3 1 3.3 2.6h-6.5c.3-1.5 1.5-2.6 3.2-2.6ZM98.2 18.9c-1.6 0-2.9.8-3.6 2h-.1c-.6-1.2-1.8-2-3.4-2-1.4 0-2.5.7-3.1 1.8v-1.5h-1.9v10.6h2v-5.4c0-2 1-3.4 2.6-3.5 1.5 0 2.4 1 2.4 2.6v6.3h2v-5.6c0-2.4 1.4-3.3 2.6-3.3 1.5 0 2.4 1 2.4 2.6v6.3h2v-6.5c.1-2.6-1.4-4.4-3.9-4.4ZM109.4 28l-3.6-8.9h-2.2l4.8 11.6c-.3.9-.7 1.2-1.7 1.2h-2.5v2h2.5c1.8 0 2.8-.8 3.5-2.6l4.7-12.2h-2.1l-3.4 8.9Z"
              fill="" />
          </svg>
          <span class="visually-hidden">Аккадемия.</span>
        </a>
      </address>
    </footer>
  </div>
  <div class="modal-container modal-container-close">
    <div class="modal modal-auth">
      <button class="modal-close-button" type="button">
        <span class="visually-hidden">Закрыть.</span>
      </button>
      <section class="modal-content">
        <h2 class="modal-title">Поиск гостиницы в Седоне</h2>
        <form class="auth-form" action="https://echo.htmlacademy.ru/" method="post">
          <div class="position">
            <p class="field-group auth-date">
              <label class="long" for="auth-date">Дата Заезда:</label>
              <input class="auth-form-field" type="text" name="date-leaving" id="auth-date"
                placeholder="27 апреля 2020">
            </p>
            <span class="text-form-red">Мы не можем отправить вас в прошлое.</span>
            <p class="field-group auth-date">
              <label class="long" for="auth-date-leaving">Дата Выезда:</label>
              <input class="auth-form-field" type="text" name="date" id="auth-date-leaving"
                placeholder="1 сентября 2021">
              <span class="text-form">На эти даты есть свободные номера. Пока есть.</span>
            </p>
          </div>
          <div class="group-choice">
            <p class="field-group">
            <div class="adults">
              <label class="information field-adults" for="adults">Взрослые:</label>
              <button class="fastener button-minus" type="button">
              </button>
              <input class="form-field" type="number" min="2" name="adults" id="adults" placeholder="2">
              <button class="fastener button-plus" type="button">
              </button>
            </div>
            <div class="child">
              <span class="field-child">
                <label class="information field-child" for="child">
                  Дети:
                  <span class="visually-hidden">Посмотреть дополнительную информацию.</span>
                </label>
                <span class="tooltip">
                  <button class="tooltip-toggle" type="button" aria-labelledby="tooltip-label">
                    <svg class="tooltip-icon" width="1" height="9" viewBox="0 0 1 9" fill="none"
                      xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#a)" fill="#fff">
                        <path d="M0 9h1V3H0v6ZM1 0H0v1h1V0Z" />
                      </g>
                      <defs>
                        <clipPath id="a">
                          <path fill="#fff" d="M0 0h1v9H0z" />
                        </clipPath>
                      </defs>
                    </svg>
                  </button>
                  <span class="tooltip-text" role="tooltip" id="tooltip-label">Укажите количество детей,<br>которые
                    будут с
                    вами, возраст<br>которых от 6 до 18
                    лет. Дети<br> до 6 лет размещаются<br>бесплатно.</span>
                </span>
              </span>
              <button class="fastener button-minus" type="button">
              </button>
              <input class="form-field" type="number" min="1" name="child" id="child" placeholder="1">
              <button class="fastener button-plus" type="button">
              </button>
            </div>
          </div>
          <button class="fastener modal-submit" type="submit">Найти</button>
        </form>
      </section>
    </div>
  </div>
</body>

</html>
